header {
  display: block;
  position: relative;
  min-height: 70px;
}

nav {
  align-items: center;
  background-color: $bg-color;
  display: flex;
  justify-content: space-between;
  transition: background-color 0.5s ease-in-out, padding 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  -webkit-transition: background-color 0.5s ease-in-out, padding 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  will-change: background, padding;
  padding: 15px 0;
  line-height: 40px;

  &.fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }

  &.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(3px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    padding: 5px 0;
  }

  .container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .mark-wrapper {
      font-family: 'Fuzzy Bubbles', cursive;
      font-size: 1.6rem;

      .logo {
        width: 50px;
      }
    }

    .menu-wrapper {
      flex-basis: 100%;

      &::after {
        content: '';
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
      }

      ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        list-style: none;
        margin-bottom: 0;
        padding-left: 0;

        li {
          padding: 0.5rem;

          a {
            color: $header-text-color;
            text-decoration: none;
            transition: letter-spacing 0.2s ease-in, font-weight 0.2s ease-in;

            &:hover {
              letter-spacing: 1px;
              font-weight: 500;
            }
          }

          &.search-icon i {
            color: $header-text-color;
            cursor: pointer;
            transition: font-size 0.2s ease-in;

            &:hover {
              font-size: 1.1rem;
              color: $blue;
            }
          }
          

          &:last-child {
            padding-right: 0;
          }
        }
      }
    }

    @media (min-width: 900px) {
      flex-wrap: nowrap;

      .menu-btn {
        display: none;
      }

      .menu-wrapper {
        display: flex !important;
        flex-basis: auto;

        ul {
          flex-direction: row;
          
          li {
            & > a,i {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}

// menu icon
.menu-btn {
  padding: 0;
}

.menu-icon {
  width: 27px;
  height: 20px;
  position: relative;
  cursor: pointer;
  transform: rotate(0deg);
  transition: .5s ease-in-out;

  span {
    background-color: $header-text-color;
    height: 4px;
    width: 100%;
    position: absolute;
    right: 0;
    opacity: 1;
    transform: rotate(0deg);
    transition: .25s ease-in-out;

    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2) {
      top: 8px;
    }

    &:nth-child(3) {
      top: 16px;
    }
  }  
  
  &.open span {
    &:nth-child(1) {
      top: 8px;
      transform: rotate(45deg);
    }

    &:nth-child(2) {
      top: 8px;
      transform: rotate(-45deg);
    }

    &:nth-child(3) {
      opacity: 0;
      right: -60px;
      transform: rotate(-45deg);
    }
  }
}
